<template>
  <view class="selected">
    <!-- 上面的图片 -->
    <view class="img-top">
      <image style="width: 150px; height: 150px;" :src="selected.img"  mode=""></image>
    </view>
    <!-- 下面的文本 -->
    <view class="text-bottom">
      <text class="myText">{{selected.text}}</text>
      <view class="bottom">
        <view class="left">
          <image style="width: 20px;height: 20px;border-radius: 45%;border: 1px solid black;margin-right: 10rpx;" :src="selected.avator" mode=""></image>
          <text>{{selected.nickName}}</text>
        </view>
        <view class="right">
          <uni-icons type="eye" size="10"></uni-icons>
          <text>{{selected.see}}</text>
        </view>
      </view> 
    </view>
  </view>
</template>

<script>
  export default {
    name:"my-selected",
    props: {
      selected : {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss">
.selected {
  margin: 40rpx 10rpx;
  width: 150px;
  display: flex;
  background-color: white;
  flex-direction: column;
  box-shadow: -10px 10px 10px gray;
  .img-top {
    width: 20px;
    height: 150px;
  }
  .text-bottom {
    margin: 10rpx;
    font-size: 10px;
    .myText {
      font-weight: bold;
      display: block;
      margin: 20rpx 0;
      height: 40rpx;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
    }
  }
}
</style>